<template>
<div v-if="visibel">
    <div class="cover"></div>

    <div class="content">
        <img src="../../../assets/largescreen/close.png" @click="visibel=false" class="close" />
        <div class="head">景区客源地分析
        </div>
        <div style="display:flex;">
            <div class="mjzyx_pm_map">
                <vue-seamless-scroll ref="vueSeamlessRefMap" class="scroll-list-seamlessMap" :data="copyAreaData">
                    <ul class="ul-scoll">
                        <li v-for="(item,index) in areaData2" :key="index" class="mpm_item">
                            <div class="mpmi_left">
                                <div class="mpmil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>
                                <div class="mpmil_city">{{ item.name }}</div>
                                <div class="mpmil_line"></div>
                                <div class="mpmil_bl">
                                    <div class="mpmil_bl_bfb" :style="{'width':item.bl+'%'}"></div>
                                </div>
                            </div>
                            <div class="mpmi_right">{{ item.value }}人次</div>
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>
            <div class="right">
                <div class="ditu1" ref="echartsdiqiu"></div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import * as echarts from "echarts";
import vueSeamlessScroll from 'vue-seamless-scroll'
import "echarts/map/js/china.js";
export default {
    data() {
        return {
              mapType: 'china',
            dataList: [],
            visibel: false,
            areaData2: [],
            copyAreaData: [],
        }
    },
    components: {
        vueSeamlessScroll
    },
    props: ['areaData'],
    computed: {
        defaultOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        },
    },
    methods: {
        init() {
            this.visibel = true;
            this.areaData2 = [];
            this.area();
            if (this.areaData) {
                let sum = this.areaData.reduce((cur, pre) => cur + parseFloat(pre.value), 0);
                this.areaData.forEach(d => {
                    this.areaData2.push({
                        name: d.name,
                        value: d.value,
                        bl: (d.value / sum * 100).toFixed(2) || 0
                    })
                })
                this.$nextTick(() => {
                    const scrollListDom = document.querySelector('.scroll-list-seamlessMap')
                    if (scrollListDom) {
                        const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                        let liLength = scrollListDom.querySelectorAll('li').length;
                        let liHeight = scrollListDomLast.clientHeight;
                        let liSumHeight = liHeight * liLength;
                        let parentHeight = document.querySelector('.mjzyx_pm_map').clientHeight;
                        let autoPlay = liSumHeight > parentHeight;
                        if (autoPlay) {
                            this.copyAreaData = this.areaData2;
                            this.$refs.vueSeamlessRefMap._startMove();
                        }
                    }
                })
            }
        },
        area() {
            this.$http.get('/sys/screen/scenic/selectStatisticsScenicRegion', {
                params: {
                    region: "",
                    regionId: "",
                }
            }).then(res => {
                console.log(res.data)
                if (res.data.code == 0) {
                    this.dataList = res.data.data.map((item) => {
                        return {
                            name: item.name ? item.name.substring(0, item.name.length - 1) : '',
                            value: item.sumCount,
                            region: item.region,
                            child: item.child,
                        }
                    })
                    this.initMap();
                }
            })

        },
        initMap() {
            // 基于准备好的dom，初始化echarts实例
            let chinaMap = echarts.init(this.$refs.echartsdiqiu);
            window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
            chinaMap.setOption({
                layoutCenter: ['50%', '50%'], //位置
                layoutSize: '118%', //大小
                tooltip: {
                    className: "custom-tooltip-bk-box", //添加一个类名
                    triggerOn: "mousemove", // 鼠标移动时触发
                    axisPointer: {
                        type: "none",
                    },
                    // 鼠标移到图里面的浮动提示框
                    // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
                    formatter(params, ticket, callback) {
                        let shengfen, shuliang, child;
                        if (params.data) {
                            shuliang = params.data.value;
                            shengfen = params.data.name;
                        } else {
                            // 为了防止没有定义数据的时候报错写的
                            shuliang = 0;
                            shengfen = params.name;
                        }
                        if (params.data && params.data.child) {
                            child = params.data.child;
                        } else {
                            child = [];
                        }
                        let str = '';
                        for (let i = 0; i < child.length; i++) {
                            str += '<div style="display:flex;align-items: center"><p style="margin:0 0 10px 0;font-size:16px;color: #E0FFFF">' + child[i].scenicName + ':</p><p style="margin:0 0 10px 0;font-size:16px;color: #5EFB6E">' + child[i].count + '</p></div>'
                        }
                        let htmlStr = `
              <div class="custom-tooltip-box">
                <div style='font-size:18px;color: #E0FFFF;margin:10px 0 20px'> ${shengfen}<span style="margin-left:20px"> 总数：${shuliang}人</span></div>
                <div>
                  <div>
                        ${str}
                  </div>
                </div>
              </div> `;
                        return htmlStr;
                    },
                    backgroundColor: "#3B3131", //提示标签背景颜色 这里设置为了透明色
                    textStyle: {
                        color: "#000"
                    }, //提示标签字体颜色
                },
                // title: {
                //     top: 30,
                //     text: "景区游客地区分布",
                //     left: "30px",
                //     textStyle: {
                //         //字体风格,'normal','italic','oblique'
                //         fontStyle: "normal",
                //         //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                //         fontWeight: "bolder",
                //         //字体系列
                //         fontFamily: "san-serif",
                //         //字体大小
                //         fontSize: 18,
                //     },
                // },
                visualMap: {
                    min: 0,
                    max: 1000,
                    left: 35,
                    bottom: 55,
                    showLabel: true,
                    text: ["高", "低"],
                    textStyle: {
                        color: "#AAAAAA",
                    },
                    pieces: [{
                            gt: 2000,
                            label: "> 2000",
                            color: "#23ADF4",
                        },
                        {
                            gte: 500,
                            lte: 2000,
                            label: "500 - 2000",
                            color: "#71C3EF",
                        },
                        {
                            gte: 100,
                            lt: 500,
                            label: "100 -500",
                            color: "#A0D6F1",
                        },
                        {
                            gt: 1,
                            lt: 100,
                            label: "0-100",
                            color: "#72E7BA",
                        },
                        
                    ],
                    show: true,
                },
                geo: {
                    map: this.mapType,
                    scaleLimit: {
                        min: 1,
                        max: 2,
                    },
                    zoom: 1,
                    roam: true, //放大缩小地图、可拖拽
                    label: {
                        normal: {
                            show: true, //省份名展示
                            fontSize: "12", //省份字体大小
                            color: "rgba(0,0,0,0.5)", //省份字体颜色,
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: "white", //鼠标移入省份字体颜色变化
                            fontSize: "14px", //鼠标移入省份字体大小变化
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#fff", //地图边框颜色
                            borderWidth:"2",
                            areaColor: "#DCF4FC", //地图背景颜色
                        },
                        emphasis: {
                            show: true,
                            areaColor: "#FFFF00", //鼠标放到地图上显示的颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
                series: [{
                    type: "map",
                    mapType: this.mapType,
                    roam: false,
                    geoIndex: 0,
                    label: {
                        normal: {
                            show: true,
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                    data: this.dataList,
                }, ],
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.mjzyx_pm_map {
    width: 40%;
    margin-top: 30px;
    height: calc(100% - 74px);
    padding: 0 28px;
    overflow: hidden;

    .mpm_item {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mpmi_left {
            width: calc(100% - 55px);
            display: flex;
            align-items: center;

            .mpmil_top {
                width: 47px;
                height: 24px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-family: YouSheBiaoTiHei;
                color: #FFFFFF;
            }

            .mpmil_city {
                margin-left: 20px;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
                text-align: right;
            }

            .mpmil_line {
                width: 1px;
                height: 42px;
                background: #0A2840;
                margin-left: 10px;
            }

            .mpmil_bl {
                width: calc(100% - 120px);
                height: 6px;
                background: #172640;
                border-radius: 0 3px 3px 0;
                position: relative;

                .mpmil_bl_bfb {
                    height: 100%;
                    background: linear-gradient(270deg, #00BFF4 0%, rgba(4, 110, 255, 0) 100%);
                    border-radius: 0 3px 3px 0;
                }
            }
        }

        .mpmi_right {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #C6D7F1;
        }
    }
}

.ul-scoll {
    padding-left: 0;
}

.content {
    position: absolute;
    padding: 14px 18px;
    width: 60%;
    left: 20%;
    top: 15%;
    z-index: 1000;
    height: 70%;
    background: url("../../../assets/largescreen/bgMapDia.png") center no-repeat;
    background-size: 100% 100%;
    .right{
        width:55%;
        height:100%;
    }
}

.head {
    width: 100%;
    height: 44px;
    background: url("../../../assets/largescreen/y6.png");
    background-repeat: no-repeat;
    padding-left: 35px;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    color: #FFFFFF;
    line-height: 38px;
}

.cover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.el-icon-error {
    position: absolute;

}

.close {
    position: absolute;
    right: -24px;
    width: 56px;
    top: 0;
    z-index: 1000;
}

.ditu1 {
    height: 550px;
    width:100%;
}
</style>
